<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import clusterAddressPoints1 from "@/data/markercluster.points.5w"

export default {
    name: "AddClusterMarker.component",
    components: {Maptalks},
    setup() {

        const onClick = (e) => {
            console.log(e.target);
        }

        let mapOnLoadCB = (map) => {

            let markers = [];
            // data from markercluster.points.5w.js
            for (let i = 0; i < clusterAddressPoints1.length; i++) {
                let ca1 = clusterAddressPoints1[i];
                markers.push(new maptalks.Marker([ca1[1], ca1[0]]).on("mousedown", onClick));
            }

            let clusterLayer = new maptalks.ClusterLayer(MapLayerConst.MAP_CLUSTER_LAYER, markers, {
                "noClusterWithOneMarker": false,
                "maxClusterZoom": 18,
                //"count" is an internal letiable: marker count in the cluster.
                "symbol": {
                    "markerType": "ellipse",
                    "markerFill": {
                        property: "count",
                        type: "interval",
                        stops: [[0, "rgb(135, 196, 240)"], [9, "#1bbc9b"], [99, "rgb(216, 115, 149)"]]
                    },
                    "markerFillOpacity": 0.7,
                    "markerLineOpacity": 1,
                    "markerLineWidth": 3,
                    "markerLineColor": "#fff",
                    "markerWidth": {property: "count", type: "interval", stops: [[0, 40], [9, 60], [99, 80]]},
                    "markerHeight": {property: "count", type: "interval", stops: [[0, 40], [9, 60], [99, 80]]}
                },
                "drawClusterText": true,
                "geometryEvents": true,
                "single": true
            });

            map.addLayer(clusterLayer);
            map.setCenter([117.2721598, 23.8133062833])
            map.setZoom(12)
            map.on("click", function (e) {
                console.log(clusterLayer.identify(e.coordinate));
            });

        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>